<template>
  <div class="container">
    <div class="nav">
      <van-nav-bar title="订单详情" @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="1rem" color="black" />
        </template>
      </van-nav-bar>
    </div>
    <div class="content">
      <div class="statusTitle">已关闭</div>
      <div class="addrBox">
        <div class="addrTop">
          <div>
            <i class="iconfont icon-location" />
            <span class="addrReceiverName">收货人:ggc</span>
          </div>
          <span>15555124065</span>
        </div>
        <div class="addrBottom">收货地址：北京市-北京市-东城区</div>
      </div>
      <div class="goodsBox">
        <div class="goodsHeader">
          <span>自营</span>
          <span>小米旗舰店</span>
        </div>
        <div class="goodsContent">
          <img
            src="https://uniapp.b2b2c.niuteam.cn/upload/9/common/images/20200420/20200420115612158735497285781_mid.jpg"
            alt
          />
          <div class="goodsRight">
            <span>向日葵花束生日配送鲜花速递 蓝色梦幻</span>
            <span>¥45.00</span>
          </div>
        </div>
      </div>
      <div class="contactBox">
        <i class="iconfont icon-comment" />
        <span style="padding-left:0.2rem">联系客服</span>
      </div>
      <div class="orderBox">
        <ul>
          <li>
            <span>订单编号</span>
            <span>2020061620050001</span>
            <!-- <span @click="copy('nihaoa')">复制</span> -->
          </li>
          <li>
            <span>订单交易号</span>
            <span>2020061620050001</span>
          </li>
          <li>
            <span>创建时间</span>
            <span>2020-06-16 20:05:55</span>
          </li>
          <li>
            <span>关闭时间</span>
            <span>2020-06-16 20:37:32</span>
          </li>
        </ul>
        <ul style="margin-top:.6rem">
          <li>
            <span>配送方式</span>
            <span>物流配送</span>
          </li>
          <li>
            <span>店铺活动</span>
            <span>秒杀</span>
          </li>
        </ul>
      </div>
      <div class="amountBox">
        <ul>
          <li>
            <span>商品金额</span>
            <span>¥45.00</span>
          </li>
          <li>
            <span>运费</span>
            <span>¥5.00</span>
          </li>
        </ul>
        <div class="payAmount">
          应付款:
          <span>¥45.00</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, Icon } from "vant";
export default {
  components: {
    "van-nav-bar": NavBar,
    "van-icon": Icon
  },
  methods: {
    copy(shareLink) {
      let input = document.createElement("input"); // 直接构建input
      input.value = shareLink; // 设置内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input); // 删除临时实例
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  background-color: #f7f7f7;
  height: 100%;
  .nav {
    height: 2.3rem;
  }
  .content {
    height: calc(100% - 2.3rem);
    overflow-y: auto;
    padding: 0.4rem 0.4rem 1rem;
    box-sizing: border-box;
    &::-webkit-scrollbar {
      width: 0;
    }
    .statusTitle {
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(to right, #cf2835, #e64a49);
      height: 4rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: white;
    }
    .addrBox {
      margin-top: 0.4rem;
      padding: 0.4rem;
      background-color: white;
      border-radius: 0.4rem;
      font-size: 0.7rem;
      .addrTop {
        color: #666;
        display: flex;
        justify-content: space-between;
        .addrReceiverName {
          padding-left: 0.2rem;
        }
      }
      .addrBottom {
        margin-top: 0.2rem;
        color: #999;
      }
    }
    .goodsBox {
      margin-top: 0.4rem;
      background-color: white;
      border-radius: 0.4rem;
      padding: 0.4rem;
      .goodsHeader {
        padding-bottom: 0.4rem;
        display: flex;
        align-items: center;
        span {
          &:nth-child(1) {
            padding: 0.15rem 0.3rem;
            background-color: #cf2835;
            color: white;
            border-radius: 0.2rem;
            font-size: 0.6rem;
          }
          &:nth-child(2) {
            padding-left: 0.4rem;
            font-size: 0.65rem;
            font-weight: 600;
          }
        }
      }
      .goodsContent {
        display: flex;
        img {
          width: 4.3rem;
          height: 4.3rem;
        }
        .goodsRight {
          padding-left: 0.4rem;
          width: calc(100-4.3rem);
          box-sizing: border-box;
          font-size: 0.65rem;
        }
      }
    }
    .contactBox {
      margin-top: 0.4rem;
      height: 2.1rem;
      background-color: white;
      font-size: 0.7rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0.4rem;
    }
    .orderBox {
      margin-top: 0.4rem;
      padding: 0.4rem;
      background-color: white;
      border-radius: 0.4rem;
      li {
        padding: 0.25rem 0;
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
        color: #666;
      }
    }
    .amountBox {
      margin-top: 0.4rem;
      background-color: white;
      padding: 0.4rem;
      border-radius: 0.4rem;

      li {
        padding: 0.2rem 0;
        display: flex;
        justify-content: space-between;
        font-size: 0.7rem;
        color: #666;
      }
      .payAmount {
        text-align: right;
        font-size: 0.75rem;
        font-weight: 600;
        > span {
          color: tomato;
        }
      }
    }
  }
}
</style>